<template>
	<view class="home">
		<view class="top">
			<!-- <view :class="['top-fixd', 'flex-between',!showNavBg?'':'nav-bg']">
				<image style="width: 82px;height: 24px;" src="../../static/logotext.png" mode=""></image>
				<view class="flex flex">
					<view class="flex-center lang" style="padding: 8px 12px; border-radius: 19px;">
						<image style="width: 18px;height: 18px;" src="../../static/lang.png" mode=""></image>
						<text class="pl5 fb" @click="openPopup"> {{getLang($i18n.locale)}}</text>
					</view>
					<view style="flex-direction: column;color: var(--theme-text-color);margin-left: 10px;padding: 5px 10px;background: var(--theme-box-bg);border-radius: 50%;" @click="changTheme">
						<span :class="['fs24', 'iconfont', themeType==1?'icon-sun':'icon-moon']" ></span>
					</view>
				</view>
			</view> -->
			<view class="placeholder"></view>
			<selectLang :select="select"></selectLang>
			<view class="banner mt10 p-lr-16">
				<swiper class="swiper" circular indicator-active-color="#fff" autoplay :interval="2000"
					style="background-color: rgb(243, 244, 246); height: 160px; border-radius: 26px;">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-item">
							<image :src="config.BASE_URL+item.image" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="slider position-relative" v-show="!introduceIsShow">
				<image class="line position-absolute" style="height: 136px;width: 100%;" src="../../static/slide-down.27e2c857.png" mode=""></image>
				<view class="lucky position-relative">
					<image src="/static/jxw.c61decc2.png" style="top: 2px; left: 0px;width: 100%; height: 42px;position: absolute;" mode=""></image>
				</view>
				<image src="../../static/下载 (1).png" class="lucky-hand position-absolute" style="height: 14px;" mode=""></image>
				<image src="../../static/下载.png" class="dialog" style="height: 14px;" mode=""></image>
				<view class="dialog jxw-dialog highlight-color flex-center position-absolute" @click="introduceIsShow=true" style="border-radius: 50%; height: 36px; width: 80px; transform: translateX(44%) translateY(-166%) rotateZ(-7deg);">
					{{$t('home.clickme')}}~
				</view>
			</view> -->
		</view>
		<view v-show="introduceIsShow" class="introduce-area position-absolute" style="z-index: 333; margin-top: 70px;">
			<view class="p-lr-16">
				<view class="platform-spark">
					<view class="fs16 flex-center fb highlight-color">
						<image src="/static/titleImg.png" style="width: 23px; height: 11px;" mode=""></image>
						<view class="" style="margin: 0px 8px;">{{$t('home.text1')}}</view>
						<image src="/static/titleImg.png" style="width: 23px; height: 11px;" mode=""></image>
					</view>
					<view class="content fs12 mt10 text-align-center" style="line-height: 20px;">
						{{$t('home.text2')}}
					</view>
					<view class="position-relative display highlight-color" style="margin-top: 50px;" id="canvas">
						<image class="position-absolute"
							style="height: 229px; width: 292	px; margin-left: 22px; margin-top: 100px;"
							src="../../static/introduce-bg.png" mode=""></image>
						<image src="../../static/line-circle.png" class="line-circle position-absolute"
							style="height: 286px; width: 302px; margin-left: 22px; margin-top: 30px;" mode=""></image>
						<image src="/static/下载 (6).png"
							style="width: 4px; height: 4px; top: 160px; left: 61px; opacity: 0.9587;" mode=""></image>
						<image src="/static/下载 (4).png"
							style="width: 8px; height: 23px; top: 170px; left: 64px; opacity: 0.8469;" mode=""></image>
						<image src="/static/下载 (3).png"
							style="width: 2px; height: 26px; top: 132px; left: 71px; opacity: 0.826;" mode=""></image>
						<image src="/static/下载 (6).png"
							style="width: 4px; height: 4px; top: 130px; left: 79px; opacity: 1;" mode=""></image>
						<image src="/static/下载 (2).png"
							style="width: 12px; height: 25px; top: 133px; left: 86px; opacity: 1;" mode=""></image>
						<image src="/static/下载 (3).png"
							style="width: 3px; height: 17px; top: 117px; left: 193px; opacity: 1;" mode=""></image>
						<image src="/static/下载 (7).png"
							style="width: 2px; height: 30px; top: 136px; left: 230px; opacity: 0.9575;" mode=""></image>
						<image src="/static/下载 (6).png"
							style="width: 5px; height: 5px; top: 142px; left: 231px; opacity: 0.9999;" mode=""></image>
						<image src="/static/下载 (8).png"
							style="width: 5px; height: 5px; top: 159px; left: 242px; opacity: 1;" mode=""></image>
						<image src="/static/下载 (4).png"
							style="width: 8px; height: 22px; top: 205px; left: 191px; opacity: 1;" mode=""></image>
						<image src="/static/下载 (5).png"
							style="width: 6px; height: 27px; top: 193px; left: 53px; opacity: 1;" mode=""></image>
						<view class="">
							<view class="box flex-column position-absolute" v-for="(item, index) in items" :key="index"
								:style="item.style">
								<image class="img icon-lg" :src="`/static/home/homeImg${index+1}.png`" mode=""></image>
								<text class="fs12">{{ item.label }}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="about-us" style="margin-top: 50px;">
					<view class="fs16 flex-center fb highlight-color">
						<image src="/static/titleImg.png" style="width: 23px; height: 11px;" mode=""></image>
						<view class="" style="margin: 0px 8px;">{{$t('privacy')}}</view>
						<image src="/static/titleImg.png" style="width: 23px; height: 11px;" mode=""></image>
					</view>
					<PolicyVue></PolicyVue>
				</view>
			</view>
		</view>
		<view v-show="!introduceIsShow" class="function-area position-absolute mt20 p-lr-16" style="z-index: 333;">
			<!-- 快捷小导航 -->
			<!-- <view class="function-block flex-between flex-wrap">
				<view v-for="(item,index) in iconsList" :key="index" class="my-item radius-12 item fs14" style="width: 160rpx; height: 162rpx;background-color:var(--theme-box-bg);margin-top: 8px;box-sizing: border-box;">
					<view class="flex-column flex-1" @click="goPage(item,index)">
						<view class="position-relative">
							<image class="icon-lg" :src="`/static/home/${item.img}.png`" mode=""></image>
						</view>
						<text style="white-space: nowrap;font-size: 26rpx;">{{item.label}}</text>
					</view>
				</view>
				<view class="my-item radius-12 fs14 kf" style="background-color: #fff;margin-top: 8px;box-sizing: border-box;background: url(&quot;/static//kf-bg.png&quot;) 0% 0% / cover;">
					<view class="flex-center flex-1" @click="callShowPanel">
						<view style="display: flex;flex-direction: column;">
							<text class="fs12">{{$t('onLineService')}}</text>
							<text class="fs12 text-des-color">{{$t('home.text3')}}</text>
						</view>
						<image class="kf-icon" style="height: 50px;" src="/static/home/zxkf.png" mode=""></image>
					</view>
				</view>
			</view> -->
			<!-- 小信息公告 -->
			<view class="function-block flex-between flex-wrap">
				<view v-for="(item,index) in infoList" :key="index" class=" my-item">
					<view class="flex-column flex-1" @click="goPage(item,index)">
						<view class="position-relative info-img">
							<image class="icon-lg" :src="`/static/home/${item.img}.png`" mode=""></image>
							<text class="info-title-big">{{item.currency1}}<text
									class="info-title-small">{{item.currency2}}</text></text>
						</view>
						<view class="info-color">0.1%</view>
						<text class="info-color info-num"
							style="white-space: nowrap;font-size: 26rpx;">{{item.label}}</text>
					</view>
				</view>
			</view>
			<!-- 客服/充值 -->
			<view class="combination">

				<view class="combination-flex fs14 kf"
					style="background-color: #fff;margin-top: 8px;box-sizing: border-box;background: url(&quot;/static//kf-bg.png&quot;) 0% 0% / cover;">
					<view class="flex-center flex-1" @click="callShowPanel">
						<view style="text-align: center;">
							<text class="info-color">充值</text>
							<text class="info-color">BTC/USDT/ETH</text>
						</view>
						<image class="kf-icon" style="height: 50px;" src="/static/home/zxkf.png" mode=""></image>
					</view>
				</view>

				<view class="combination-flex fs14 kf"
					style="background-color: #fff;margin-top: 8px;box-sizing: border-box;background: url(&quot;/static//kf-bg.png&quot;) 0% 0% / cover;">
					<view class="flex-center flex-1" @click="callShowPanel">
						<view>
							<text class="info-color">在线客服</text>
						</view>
						<image class="kf-icon" style="height: 50px;" src="/static/home/zxkf.png" mode=""></image>
					</view>
				</view>

			</view>

			<!-- 股票信息 -->
			<!-- <view class="mt20">
				<view class="">
					<view class="my-item radius-12 page-aid fs14 notice">
						<view class="flex flex-1">
							<image class="scale" src="/static/notice.png" mode=""></image>
							<view class="" style="margin-left: 14px;flex: 1;">
								<view class="scroll-container">
									<view class="scroll-content">
										<view v-for="(item, index) in notice" :key="index"
											class="announcement-item fs12">
											<text v-html="item.content"></text>
										</view>
									</view>
								</view>
								<view class="text-row fs12" >
									<text v-html="notice[0]?.content"></text>
								</view>
								<text class="time mt5 fs12 text-des-color"></text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="flex-column product-list mt10 wow  animate__bounceInRight animate__animated"
				style="visibility: visible;">
				<view class="" style="width: 100%;">
					<table style="width: 100%;" class="market-table">
						<thead class="market-title" style="height: 50px;text-align: left;">
							<th>商品名称</th>
							<th>价格</th>
							<th>{{$t('low')}}</th>
							<th>{{$t('high')}}</th>
						</thead>
						<tbody>
							<tr class="market-ma" v-for="(item,index) in productsList" :key="index"
								@click="goDetails(item)">
								<view class="market-company">
									<image class="market-img" src="/static/start0.5e0d719b.png"></image>
									<td class="market-name">{{item.symbol}}</td>
								</view>
								<td :class="parseFloat(item.open)<item.price?'text-down-new':'text-up-new'">
									{{item.price}}
								</td>
								<td class="market-name">
									{{item.high}}
								</td>
								<td class="market-name">
									{{item.low}}
								</td>
							</tr>
							<tr class="spacer">
								<td colspan="4"></td>
							</tr>
						</tbody>
					</table>
					<!-- <uni-load-more :status="loading ? 'loading' : finished ? 'noMore' : 'more'" :contentText="contentText"  @clickLoadMore="loadMore"></uni-load-more> -->
				</view>
			</view>
		</view>
		<!--  -->
		<view v-show="introduceIsShow"
			class="slider-bottom position-relative animate__animated animate__mybounceInDown  animation-2s">
			<image class="line position-absolute" style="width: 100%;height: 80px;"
				src="../../static/slider-bottom.7f4d20d0.png" mode=""></image>
			<view class="btn position-absolute flex-center fs12" @click="introduceIsShow = false">
				{{$t('home.text5')}}
			</view>
			<view class="page-main fill" style="width: 100%;"></view>
		</view>
		<!-- <meiQia ref="meiqiaRef"></meiQia> -->
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '../../store/index.js'
	import selectLang from '../../components/selectLang.vue';
	import PolicyVue from '../../components/privacy_Policy.vue';
	// import meiQia from '../../components/meiQia.vue';
	import {
		getBanner,
		getNotice,
		getRecomList,
		getClassifyList,
		getProductsList
	} from '../../api/index.js'
	import useGlobalProperties from '../../utils/useGlobalProperties.js'
	const {
		$t,
		$i18n
	} = useGlobalProperties()
	import {
		getLang,
		formatAmount
	} from '../../utils/utils.js'
	import config from '../../config';
	// 获取 store
	const userStore = useUserStore()
	const select = ref(0)
	const introduceIsShow = ref(false)
	const showNavBg = ref(false)
	const bannerList = ref([])
	const classifyList = ref([])
	const loading = ref(false)
	const finished = ref(false)
	const timer = ref(null)
	const items = [{
			label: $t('home.text6'),
			style: {
				top: '0',
				left: '50%',
				transform: 'translate(-50%, 0)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text7'),
			style: {
				top: '19%',
				right: '14%',
				transform: 'translate(0, -50%)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text8'),
			style: {
				top: '50%',
				right: '0%',
				transform: 'translate(0, -50%)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text9'),
			style: {
				bottom: '14%',
				right: '16%'
			}
		},
		{
			label: $t('home.text10'),
			style: {
				bottom: '0',
				left: '50%',
				transform: 'translate(-50%, 0)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text11'),
			style: {
				bottom: '16%',
				left: '18%',
				transform: 'translate(-50%, 0)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text12'),
			style: {
				top: '50%',
				transform: 'translate(0, -50%)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
		{
			label: $t('home.text13'),
			style: {
				top: '18%',
				left: '18%',
				transform: 'translate(-50%, -50%)',
				translate: 'none',
				rotate: 'none',
				scale: 'none'
			}
		},
	]
	const iconsList = [{
			label: $t('home.text14'),
			img: 'kjrj',
			url: '/pages/kefu/kefu'
		}, //走客服
		{
			label: $t('home.text15'),
			img: 'cpjy',
			url: '/pages/product/list'
		}, //tab 产品页
		{
			label: $t('home.text16'),
			img: 'wddd',
			url: '/pages/personal/order/order'
		},
		{
			label: $t('home.text17'),
			img: 'ckfs',
			url: '/pages/personal/withdraw-account/withdraw-account'
		},
		// { label: $t('aboutus'), img:'about', url:'/pages/aboutUs/aboutUs'},
		// { label: $t('home.text18'), img:'xtxx', url:'/pages/notice/notice'},
	]
	/* 信息公告 */
	const infoList = [{
			label: '1111.5544',
			currency1: 'BTC',
			currency2: '/USDT',
			img: 'kjrj',
			url: '/pages/kefu/kefu'
		}, //走客服
		{
			label: '1111.5544',
			currency1: 'GOLD',
			currency2: '/USDT',
			img: 'cpjy',
			url: '/pages/product/list'
		}, //tab 产品页
		{
			label: '1111.55444',
			currency1: 'EUR',
			currency2: '/USDT',
			img: 'wddd',
			url: '/pages/personal/order/order'
		},
	]
	const recomList = ref([])
	const goPage = (item, index) => {
		if (index === 0) {
			callShowPanel();
			// console.log("走客服");
		} else {
			uni.navigateTo({
				url: item.url
			});
		}
	};
	const goKF = () => {
		// console.log("走客服");
	}
	const activeTabIndex = ref(0)
	const switchTab = (index) => {
		activeTabIndex.value = index
		productsList.value = []
		pageCof.value.page = 1
		loadMore();
	}
	onPageScroll((e) => {
		// console.log("滚动条高度：", e.scrollTop);
		if (e.scrollTop > 10) {
			showNavBg.value = true
		} else {
			showNavBg.value = false
		}
	})
	const meiqiaRef = ref(null);
	const callShowPanel = () => {
		// uni.navigateTo({
		// 	url: '/pages/kefu/kefu'
		// });
		window.location.href = "https://de.to01.top/addons/kefu/index/mobile?token=" + uni.getStorageSync(
			'H5STOCK_USERINFO').token
		// window.location.href = config.BASE_URL+ "/addons/kefu/index/mobile?token="+uni.getStorageSync('H5STOCK_USERINFO').token
		// if (meiqiaRef.value) {
		//   meiqiaRef.value.showPanel(); // 调用子组件的 showPanel 方法
		// }
	};
	const scroll = (e) => {
		// console.log(e)
	}
	const openPopup = () => {
		select.value++
	}
	const notice = ref({})
	const pageCof = ref({
		page: 1,
		size: 10
	})
	const contentText = {
		contentdown: $t('loadMore'),
		contentrefresh: $t('loading'),
		contentnomore: $t('noMore')
	}
	const productsList = ref([])
	const socketRef = ref(null);
	const socketNub = ref(0);
	const statusText = ref('未连接');

	//币种数组
	const receivedMessages = ref([]);

	const loadMore = () => {
		// 创建WebSocket连接
		socketRef.value = uni.connectSocket({
			url: 'wss://st.dt12.cfd/wss',
			success: () => {
				console.log('WebSocket连接创建成功');
			},
			fail: (err) => {
				console.error('WebSocket连接创建失败', err);
				statusText.value = '连接失败';
			}
		});
		// 监听WebSocket接收消息
		socketRef.value.onMessage((res) => {
			console.log('收到服务器内容：', res);
			// productsList.value = JSON.parse(res.data)
			let arr = JSON.parse(res.data)
			console.log('收到的数据：', arr);

			//新增数组到列表
			addCoinData(JSON.parse(res.data))

		});
		// 断开WebSocket连接
		const disconnectWebSocket = () => {
			connected.value = false;
			showNotification('已断开WebSocket连接');
			if(socketNub.value <5){
				socketNub.value++
				this.loadMore();
			}
			
		};
		// 监听WebSocket错误
		socketRef.value.onError((err) => {
			console.error('WebSocket连接发生错误', err);
			statusText.value = '连接错误';
		});
	}
	//新增数据到数组
	const addCoinData = (newData) => {
		receivedMessages.value.unshift({
			...newData
		});
		if (receivedMessages.value.length > 10) {
			receivedMessages.value.pop();
		}
		// 检查是否已存在相同symbol的数据
		const existingIndex = productsList.value.findIndex(coin => coin.symbol === newData.symbol);
		if (existingIndex !== -1) {
			// 如果已存在，更新数据并标记为已更新
			newData.updated = true;
			productsList.value[existingIndex] = {
				...newData
			};

			// 1秒后取消更新标记
			setTimeout(() => {
				const index = productsList.value.findIndex(c => c.symbol === newData.symbol);
				if (index !== -1) {
					productsList.value[index].updated = false;
				}
			}, 1000);
		} else {
			// 如果不存在，添加新数据
			productsList.value.push({
				...newData
			});
		}
	}
	// 去往产品详情页
	const goDetails = (item) => {
		userStore.setSelect({
			name: item.symbol,
			tick: item.data
		})
		uni.navigateTo({
			url: '/pages/product/product?id=' + item.id + '&symbol=' + item.symbol + '&class=' + classifyList
				.value[activeTabIndex.value].id,
		})
	}
	watch(() => userStore.getSseData(), (newVal, oldVal) => {
		// console.log('新值到啦',newVal);
		if (productsList.value.length == 0) return
		productsList.value.forEach(item => {
			for (const key in newVal) {
				if (newVal.hasOwnProperty(key) && item.code === key) {
					// console.log('newVal[key]',newVal[key]);
					// item.data.amt_value = newVal[key].amt_value;
					// item.data.amt = newVal[key].amt;
					item.data.price = newVal[key].data.price;
					item.data.high = newVal[key].data.high;
					item.data.low = newVal[key].data.low;
					// item.data.zf_rate = newVal[key].data.zf_rate;
				}
			}
		})
	}, {
		immediate: true,
		deep: true
	})
	const themeType = ref(2) // 1 黑  2 白
	onMounted(() => {
		const colorInfo = uni.getStorageSync('themeColor') ? JSON.parse(uni.getStorageSync('themeColor')) : ''
		if (colorInfo) {
			if (colorInfo.themeColor == '#f9f9f9') {
				themeType.value = 2
			} else {
				themeType.value = 1
			}
		} else {
			themeType.value = 2
		}
		getBanner().then(res => {
			// console.log('轮播图 res',res);
			if (res.code == 1) {
				bannerList.value = res.data
			}
		})
		getNotice().then(res => {
			// console.log('公告 res',res);
			notice.value = res.data
		})
		// getRecomList().then(res =>{
		// 	// console.log('产品推荐',res.data);
		// 	recomList.value = res.data
		// })
		getClassifyList().then(res => {
			// console.log('产品分类',res.data);
			classifyList.value = res.data
			classifyList.value.sort((a, b) => a.sort - b.sort);
			loadMore();
		})
	})
	// 切换主题色
	const getColor = (num) => {
		themeType.value = num
		if (num == 1) { // 黑
			// console.log('黑色');
			document.documentElement.style.setProperty('--theme-color', '#000');
			document.documentElement.style.setProperty('--theme-text-color', '#fff');
			document.documentElement.style.setProperty('--theme-box-bg', '#121212');
			document.documentElement.style.setProperty('--theme-input-bg', '#0D3234');
			// document.documentElement.style.setProperty('--theme-pupop-bg', '#C9F2E3');
			uni.setStorageSync('themeColor', JSON.stringify({
				themeColor: '#000',
				themeTextColor: '#fff',
				themeBoxBg: '#121212',
				themeInputBg: '#0D3234',
				themePupopBg: '#fff',
			}))
		} else { // 白
			// console.log('白色');
			document.documentElement.style.setProperty('--theme-color', '#f9f9f9');
			document.documentElement.style.setProperty('--theme-text-color', '#333');
			document.documentElement.style.setProperty('--theme-box-bg', '#fff');
			document.documentElement.style.setProperty('--theme-input-bg', '#ddd');
			// document.documentElement.style.setProperty('--theme-pupop-bg', '#fff');
			uni.setStorageSync('themeColor', JSON.stringify({
				themeColor: '#f9f9f9',
				themeTextColor: '#333',
				themeBoxBg: '#fff',
				themeInputBg: '#ddd',
				themePupopBg: '#fff',
			}))
		}
	}
	const changTheme = () => {
		const num = themeType.value == 1 ? 2 : 1;
		getColor(num)
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #21252F;
	}

	.page-background-color {
		background-color: #21252F !important;
	}

	.home {
		width: 100%;
		height: 100vh;
		background: url(/static/bg.5040a33b.png) no-repeat;
		// background-size: 375px 448px;
		background-position-y: -47px;
		background-size: cover;
	}

	.top-fixd {
		width: 100%;
		// max-width: 900px;
		height: 50px;
		position: fixed;
		// left: 0;
		top: 0;
		padding-top: calc(var(--status-bar-height));
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
		z-index: 1020;
	}

	.lang {
		background-color: rgba(235, 239, 241, .43);
	}

	.placeholder {
		height: calc(50px + var(--status-bar-height));
		z-index: 1020;
	}

	.swiper-item {
		height: 160px;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.home .top .slider {
		margin-top: 51px;
	}

	.home .top .slider .lucky {
		width: 61px;
		top: -16px;
		left: 50%;
		-webkit-transform: translateX(-66%);
		transform: translateX(-66%);
	}

	.lucky-hand {
		width: 15px;
		left: 50%;
		margin-left: 5px;
		top: 12px;
		z-index: 300;
		animation: up-down 1s infinite ease-in-out;
		/* 1秒上下摇动，循环 */
	}

	/* 动画关键帧 */
	@keyframes up-down {
		0% {
			transform: translateY(0);
			/* 初始位置 */
		}

		50% {
			transform: translateY(-15px);
			/* 向上移动 10px */
		}

		100% {
			transform: translateY(0);
			/* 返回初始位置 */
		}
	}

	.home .top .slider .dialog {
		width: 18px;
		z-index: 300;
		left: 50%;
		-webkit-transform: translateX(100%) translateY(-100%);
		transform: translateX(100%) translateY(-100%);
	}

	.jxw-dialog {
		border: 1px solid #1a7acb;
		font-size: 12px;
	}

	.introduce-area {
		width: 100%;
		padding-bottom: 100px;
	}

	.function-area {
		width: 100%;
		overflow: hidden;
		padding-bottom: 50px;
		// background-color: var(--theme-color);
		box-sizing: border-box;
	}

	.display {
		position: relative;
		height: 342px;
		background-size: cover;
		background-position: 50%;
	}

	.line-circle {
		-webkit-animation: myRotate 12s linear infinite;
		animation: myRotate 12s linear infinite;
	}

	@keyframes myRotate {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}

	@-webkit-keyframes myRotate {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}

	@keyframes swing {
		0% {
			-webkit-transform: rotateX(0deg);
			transform: rotateX(0deg)
		}

		12.5% {
			-webkit-transform: rotateX(-65deg);
			transform: rotateX(-65deg)
		}

		37.5% {
			-webkit-transform: rotateX(65deg);
			transform: rotateX(65deg)
		}

		62.5% {
			-webkit-transform: rotateX(-65deg);
			transform: rotateX(-65deg)
		}

		87.5% {
			-webkit-transform: rotateX(65deg);
			transform: rotateX(65deg)
		}

		to {
			-webkit-transform: rotateX(0deg);
			transform: rotateX(0deg)
		}
	}

	.animate__myswing {
		-webkit-transform-origin: top center;
		transform-origin: top center;
		-webkit-animation-name: swing;
		animation-name: swing;
		-webkit-animation-duration: 4s;
		animation-duration: 4s
	}

	.icon-lg {
		width: 18px;
		height: 18px;
	}

	.about-us .info {
		font-family: PingFang SC-Regular, PingFang SC;
		line-height: 20px;
		color: #222;
	}

	.slider-bottom {
		z-index: 1020;
		/* padding-bottom: 10px; */
		width: 100%;
		height: 100px;
		position: fixed;
		bottom: 0;
		/* margin-bottom: 50px; */
	}

	.slider-bottom .fill {
		height: 20px;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.animate__mybounceInDown {
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
	}

	.animate__animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-duration: var(--animate-duration);
		animation-duration: var(--animate-duration);
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	@keyframes bounceInDown {

		0%,
		60%,
		75%,
		90%,
		100% {
			-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
			animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		}

		0% {
			opacity: 0;
			-webkit-transform: translate3d(0, calc(278px - 100vh), 0) scaleY(2);
			transform: translate3d(0, calc(278px - 100vh), 0) scaleY(2);
		}

		60% {
			opacity: 1;
			-webkit-transform: translate3d(0, 25px, 0) scaleY(.9);
			transform: translate3d(0, 25px, 0) scaleY(.9);
		}

		75% {
			-webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
			transform: translate3d(0, -10px, 0) scaleY(.95);
		}

		90% {
			-webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
			transform: translate3d(0, 5px, 0) scaleY(.985);
		}

		100% {
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
		}
	}

	.slider-bottom .btn {
		width: 96px;
		height: 25px;
		background-color: unset;
		border: 1px solid #1a7acb;
		color: #1a7acb;
		top: 50px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.page-aid {
		background-color: var(--theme-box-bg);
	}

	.notice {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.notice image {
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		animation: heartbeat 1.5s infinite;
		/* 调用心跳动画 */
	}

	@keyframes heartbeat {

		0%,
		100% {
			transform: scale(1);
			/* 初始大小 */
		}

		25% {
			transform: scale(1.1);
			/* 最大缩放 */
		}

		50% {
			transform: scale(0.9);
			/* 缩小回弹效果 */
		}

		75% {
			transform: scale(1.1);
			/* 稍微放大 */
		}
	}

	.flex-1 {
		flex: 1;
	}

	.cha_img {
		width: 8px;
		height: 8px;
		margin-right: 3px;
	}

	.product-list {
		box-sizing: border-box;
	}

	.top {
		z-index: 1020;
		width: 100%;
		// max-width: 900px; /* 限制container的最大宽度 */
		position: relative;
	}

	.tab-container {
		display: flex;
		position: relative;
	}

	.tab {
		// flex: 1;
		// text-align: center;
		padding: 5px 10px;
		color: #666;
		/* 默认文字颜色 */
		transition: color 0.3s;
		/* 切换文字颜色的动画 */
	}

	.tab.active {
		color: #000;
		/* 激活状态文字颜色 */
		font-weight: bold;
	}

	.underline {
		position: absolute;
		bottom: 0;
		height: 4px;
		width: 14px;
		/* 初始宽度 */
		background: #3c9cff;
		/* 下划线颜色 */
		transition-duration: 300ms;
		border-radius: 2px;
	}

	.overflow-hidden {
		overflow: hidden;
	}

	.scroll-container {
		width: 100%;
		height: 50px;
		overflow: hidden;
		position: relative;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;
		position: absolute;
		animation: scroll 2s linear infinite;
	}

	.announcement-item {
		margin-top: 20px;
		height: 50px;
		white-space: nowrap;
	}

	/* 动画效果 */
	@keyframes scroll {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	// 信息公告
	.info-img {
		display: flex;
		color: #fff;
	}

	.my-item {
		width: 30%;
		padding: 20rpx 0;
		background: #2C303B !important;
		border-radius: 10px;
	}

	.info-color {
		color: #fff;
	}

	.info-num {
		overflow-x: hidden;
	}

	.info-title-big {
		font-size: 13px;
	}

	.info-title-small {
		font-size: 11px;
	}

	// 客服、充值
	.combination {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.combination-flex {
		background: linear-gradient(136deg, #1B232A -53%, #5ED5A8 379%) !important;
		border-radius: 10px;
	}

	.kf {
		width: 167px;
		padding: 15px 12px;

	}

	.kf-icon {
		width: 58px;
		margin-left: 1px;
	}

	//股票市场
	.market-title {
		color: #7D8491;
		font-weight: normal !important;
		padding-bottom: 20px;
	}

	.market-title th {
		font-weight: normal !important;
		font-size: 13px;
		border-top: 1px solid #2C303A;
		border-bottom: 1px solid #2C303A;
	}

	.market-company {
		display: flex;
		align-items: center;
		height: 30px;
	}

	.market-name {
		color: #fff;
	}

	.market-img {
		width: 30px;
		height: 30px;
	}

	.market-table {
		border-collapse: separate;
		/* 必须设置为separate */
		border-spacing: 0 40px;
		/* 垂直间距10px，水平间距0 */
		margin-top: -40px;
		/* 抵消第一行上方的间距 */
	}

	.text-down-new {
		height: 30px !important;
		background-color: #f33b50;
		color: #fff !important;
		border-radius: 5px;
		text-align: center;
	}

	.text-up-new {
		height: 30px !important;
		color: #fff !important;
		background-color: #0bb563;
		border-radius: 5px;
		text-align: center;
	}
</style>